<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		 <meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<!--先引入vue.js再引入vueruter.js-->
		<link rel="stylesheet" type="text/css" href="css/select.css"/>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		<div id="box">
			<!--router-link 最后变成a标签-->
			<div class="main">
				
				<router-link to="/index" class="foot_nav">
					<span class="sp1"></span>
					首页</router-link>
				<router-link to="/study" class="foot_nav">
					<span class="sp2"></span>
					我的学习</router-link class="foot_nav">
				<router-link to="/my">
					<span class="sp3"></span>
					账号</router-link>
			</div>
			<router-view></router-view>
		</div>
		<template id="index">
			<div id="content">
				<div id="top">
					<div id="search">
						<img src="img/sao.png" width="30px" style="margin-top: 3px;">
						<input type="text" placeholder="中国大学MOOC"/>
					</div>
					<div id="nav">
							<router-link to="/choice" class="c_nav">精选</router-link>
							<router-link to="/select" class="c_nav">精选微课</router-link>
							<router-link to="/computer" class="c_nav">计算机</router-link>
							<router-link to="/quality" class="c_nav">国家精品</router-link>
						
					</div>
				</div>
				
				<router-view></router-view>
			</div>
			
		</template>
		
		<template id="choice">
			<h1>精选</h1>
		</template>
		
		<template id="select">
			<div id="select_con">
				<div class="se_content" id="hobby">
					<h4>兴趣爱好</h4>
					<ul class="ul_list">
						<li v-for="(v,i) in hobby_list">
							
							<div class="h_bottom">
								<span class="flag" v-if="v.flag.show">{{v.flag.text}}</span>
								<h5>{{v.title}}</h5>
								<p class="h_time">{{v.time}}</p>
								<img :src="v.picture" >
								<p class="h_teacher">{{v.teachear}}</p>
								<p class="free">免费</p>
								<p class="h_peo">{{v.people}}</p>
							</div>
						</li>
					</ul>
				</div>
				
				<div id="english">
					<h4>全能英语</h4>
					<ul class="ul_list">
						<li v-for="(v,i) in english_list">
							
							<div class="h_bottom">
								<span class="flag" v-if="v.flag.show">{{v.flag.text}}</span>
								<h5>{{v.title}}</h5>
								<p class="h_time">{{v.time}}</p>
								<img :src="v.picture" >
								<p class="h_teacher">{{v.teachear}}</p>
								<p class="free">免费</p>
								<p class="h_peo">{{v.people}}</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</template>
		
		<template id="computer">
			<h1>计算机</h1>
		</template>
		
		<template id="quality">
			<h1>国家精品</h1>
		</template>
		
		<template id="study">
			<h1>我的学习</h1>
		</template>
		<template id="my">
			<h1>个人中心</h1>
			
		</template>
		
		
		<script src="js/template.js"></script>
		
	</body>
</html>
